.search-box {
  line-height: $navbarHeight + .125rem;

  input {
    height: 1.375rem !important;
    color: rgba(0, 0, 0, 0.65) !important;
    border-radius: 0 !important;
    border: none !important;
    border-left: 1px solid darken($borderColor, 5%) !important;
    line-height: 1.375rem !important;
    padding-left: 2.2rem !important;
    background: #fff url('../assets/search.svg') .5rem 0 no-repeat !important;
    background-size: 1.25rem !important;
  }

  .suggestions {
    top: $navbarHeight + .3125rem !important;
    border-radius: 3px !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
  }

  .suggestion {
    border-radius: 3px !important;
    transition: background-color .25s ease-in-out, color .25s ease-in-out;

    &:hover {
      background-color: fade($accentColor, 10%) !important;
    }

    a {
      color: $textColor !important;

      .page-title {
        font-weight: normal !important;
      }
    }

    &.focused {
      background-color: fade($accentColor, 10%) !important;

      a {
        color: $accentColor !important;
      }
    }
  }
}
@media (max-width: $MQNarrow) {
  .search-box {
    input {
      border: 1px solid #d9d9d9 !important;
      border-radius: 40px !important;
      height: 2rem !important;
      background-position: .5rem .3rem !important;

      &:hover {
        border-color: $accentColor !important;
      }

      &:focus {
        border-color: $accentColor !important;
        box-shadow: 0 0 0 2px fade($accentColor, 20%);
      }
    }
  }
}

// Match IE11
// @media all and (-ms-high-contrast: none) {
//   .search-box input {
//     height: 2rem;
//   }
// }
@media (max-width: $MQNarrow) and (min-width: $MQMobile) {
  .search-box {
    left: 0 !important;

    input {
      border-color: transparent !important;
      background-size: 1.65rem !important;
      background-position: .5rem .1rem !important;

      &:focus {
        border-color: $accentColor !important;
        background-size: 1.25rem !important;
        background-position: .5rem .3rem !important;
        box-shadow: 0 0 0 2px fade($accentColor, 20%);
      }
    }

    .suggestions {
      left: .625rem !important;
    }
  }
}
@media (max-width: $MQMobile) {
  .search-box {
    input {
      left: 1rem !important;
      border-color: transparent !important;
      background-size: 1.5rem !important;
      background-position: .5rem .1rem !important;

      &:focus {
        border-color: $accentColor !important;
        background-size: 1.25rem !important;
        background-position: .5rem .3rem !important;
        box-shadow: 0 0 0 2px fade($accentColor, 20%);
        left: .625rem !important;
      }
    }

    .suggestions {
      left: .625rem !important;
    }
  }
}
@media (max-width: $MQMobileNarrow) {
  .search-box {
    input:focus {
      width: 10rem;
    }
  }
}
